import { Button, Card, Col, DatePicker, Form, Input, message, Popconfirm, Row, Select } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';

const mapStateToProps = (state: any) => ({
  ipda: state.ipda2,
  loading: state.loading.effects['ipda2/getFetchPage'],
});

// const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 0 },
    sm: { span: 0 },
  },
  wrapperCol: {
    xs: { span: 0 },
    sm: { span: 0 },
    md: { span: 0 },
  },
};
const fieldLabels = {
  projectId: '项目',
  deviceId: '设备编号',
  deviceName: '设备名称',
  versionHardware: '硬件版本号',
  versionSoftware: '软件版本号',
  batchNo: '批次号',
  deviceStatus: '设备状态',
  enrollDate: '激活时间',
  produceDate: '生产日期 ',
  publishDate: '发布日期',
  dynamicSecretkey: '动态秘钥',
};

class IpdaAdd extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();

  static contextTypes = {
    permissions: PropTypes.array,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      projectIdData: [],
      query: {},
      buttonLoading: false,
    };
  }

  componentWillMount() {
    if (this.props.location && this.props.location.state) {
      this.setState({
        query: this.props.location.state.obj,
      });
    }
  }
  componentDidMount() {
    const { dispatch } = this.props;

    dispatch({
      type: 'ipda2/getDataWithRes',
      payload: { url: '/basedata/findprojectbylogin' },
      callback: data => {
        this.setState({
          projectIdData: data,
        });
      },
    });
  }
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };

  render() {
    const { buttonLoading } = this.state;

    const { dispatch } = this.props;

    const projectIdData = this.state.projectIdData.map(d => (
      <Select.Option key={d.value}>{d.label}</Select.Option>
    ));

    const ok = (values: any) => {
      if (values) {
        this.setState({
          buttonLoading: true,
        });

        // const url = 'ipda/add';
        const obj = values;

        dispatch({
          type: 'ipda2/postObjWithRes',
          payload: { url: '/ipda/add', ...obj },
          callback: response => {
            if (response.statusCode === '0') {
              message.success('操作成功');
              // this.props.form.resetFields();

              // dispatch(routerRedux.push('/connectPlat/ipda'));
              this.props.history.push('/connectPlat/ipda');
            } else {
              message.error(response.statusMessage, 3);
            }
            this.setState({
              buttonLoading: false,
            });
          },
        });
      }
    };

    const validate = () => {
      this.formRef.current?.submit();
    };
    return (
      <div>
        <Card title="" bordered={false}>
          <Form layout="vertical" hideRequiredMark ref={this.formRef} onFinish={ok}>
            <Row gutter={24}>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.projectId}
                  name="projectId"
                  rules={[{ required: true, message: '请输入项目号' }]}
                >
                  <Select
                    placeholder="请设置设备状态"
                    allowClear
                    getPopupContainer={triggerNode => triggerNode.parentNode}
                  >
                    {projectIdData}
                  </Select>
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.deviceId}
                  name="deviceId"
                  rules={[{ required: true, message: '设备ID' }]}
                >
                  <Input maxLength="20" placeholder="请输入设备ID" />
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.deviceName}
                  name="deviceName"
                  rules={[{ required: true, message: '设备名称' }]}
                >
                  <Input maxLength="50" placeholder="请输入设备名称" />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.versionHardware}
                  name="versionHardware"
                  rules={[{ required: false, message: '硬件版本号' }]}
                >
                  <Input placeholder="请输入硬件版本号" />
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.versionSoftware}
                  name="versionSoftware"
                  rules={[{ required: false, message: '软件版本号' }]}
                >
                  <Input placeholder="请输入软件版本号" />
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.batchNo}
                  name="batchNo"
                  rules={[{ required: false, message: '设备批次号' }]}
                >
                  <Input placeholder="请输入批次号" maxLength={100} />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.deviceStatus}
                  name="deviceStatus"
                  rules={[{ required: false, message: '设备状态' }]}
                >
                  <Select
                    placeholder="请设置设备状态"
                    allowClear
                    getPopupContainer={triggerNode => triggerNode.parentNode}
                  >
                    <Select.Option value="0">出厂</Select.Option>
                    <Select.Option value="1">销售</Select.Option>
                    <Select.Option value="2">激活</Select.Option>
                    <Select.Option value="3">替换</Select.Option>
                    <Select.Option value="4">报废</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.enrollDate}
                  name="enrollDate"
                  rules={[{ required: false, message: '激活时间' }]}
                >
                  <DatePicker
                    style={{ width: '100%' }}
                    placeholder="请设置激活时间"
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.produceDate}
                  name="produceDate"
                  rules={[{ required: false, message: '生产日期' }]}
                >
                  <DatePicker
                    style={{ width: '100%' }}
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请输入生产日期"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.publishDate}
                  name="publishDate"
                  rules={[{ required: false, message: '发布日期' }]}
                >
                  <DatePicker
                    style={{ width: '100%' }}
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请输入发布日期"
                  />
                </Form.Item>
              </Col>
              <Col lg={8} md={12} sm={24}>
                <Form.Item
                  {...formItemLayout}
                  label={fieldLabels.dynamicSecretkey}
                  name="dynamicSecretkey"
                  rules={[{ required: false, message: '动态秘钥超长', max: 50 }]}
                >
                  <Input placeholder="请输入动态秘钥" />
                </Form.Item>
              </Col>
            </Row>
            <Col>
              <Form.Item style={{ display: 'none' }} label="" name="sid">
                <input type="text" />
              </Form.Item>
              <Form.Item style={{ display: 'none' }} label="" name="createDate">
                <input type="text" />
              </Form.Item>
              <Form.Item style={{ display: 'none' }} label="" name="createBy">
                <input type="text" />
              </Form.Item>
              <Form.Item style={{ display: 'none' }} label="" name="version">
                <input type="text" />
              </Form.Item>
              <Form.Item style={{ display: 'none' }} label="" name="delFlag">
                <input type="text" />
              </Form.Item>
            </Col>
          </Form>
          <Form layout="vertical" hideRequiredMark>
            <Row gutter={16}>
              <Col xl={{ span: 5, offset: 9 }} lg={{ span: 8 }} md={{ span: 12 }} sm={24}>
                <div>
                  <Button
                    loading={buttonLoading}
                    key="submit"
                    type="primary"
                    size="default"
                    onClick={validate}
                  >
                    提交
                  </Button>
                  &nbsp;&nbsp;
                  <Popconfirm title="确定放弃添加吗?" onConfirm={() => this.props.history.goBack()}>
                    <Button key="back" size="default">
                      取消
                    </Button>
                  </Popconfirm>
                </div>
              </Col>
            </Row>
          </Form>
        </Card>
      </div>
    );
  }
}

export default connect(mapStateToProps)(IpdaAdd);
